<template>
  <div ref="conversion" :id="id" :style="{width: '100%', height: '500px', position: 'relative'}" ></div>
</template>

<script>
  //通过this.$echarts来使用
  import *as echarts from 'echarts'
  import axios from "axios";
  export default {
    name: "Vcharts",
    // mounted(){
    //   // 在通过mounted调用即可
    //   this.getCharts()
    // },
    data(){
      return{
        runflag: true,
        timer: null,
        // plat: [], // 平台：水面+水下
        // target: [], // 目标： 水面+水下
        // rltimedata: [],  // 融合结果数据
        // ally: [], // 融合结果中的友方
        // enemy: [], // 融合结果中的敌方
        // points: [],  // 水面目标数据
        // water_points: [],  // 水下目标
        // plat: [],  // 水面平台数据
        // water_plat: [],  // 水下平台数据

        // tempp: {},
        flag: false,
        chart: "",
        id: 'prechart',
        option: {},
        schema: [],
        itemStyle: {},
        conversionChart: '',
        // url1: 'http://localhost',
        // url2: 'http://192.168.43.125',
        url1: '192.168.11.129',
        // url1: 'http://172.16.1.198', // 用于蒲公英远程调试

        port: ':8008',
        // '#800080', '#90ee90','#dd4444','#0000ff'
        color: ['rgb(128,0,128)','rgb(144,238,144)','rgb(221, 68, 68)','rgb(0,0,255)'],
        colorselect: '',

      }
    },
    created () {
      this.getCharts();
    },
    methods: {

      getInfo() {
        // 轮询获取实时信息
        // var num = 1;

        var t_minlong = 180;
        var t_maxlong = 0;
        var t_minlati = 90;
        var t_maxlati = 0;
        var t_plat = [];
        var t_target = [];
        // var t_rltimedata = [];
        var t_ally = [];
        var t_enemy = [];

        if (this.timer) {
          clearInterval(this.timer)
        } else if(this.runflag){
          this.timer = setInterval(() => {
            if(this.runflag) {
              //dims对象保存数组的维度，方便从data数组中取数据
              var dims = {
                longitude: 0, //经度的维度是0
                latitude: 1,//纬度的维度是1
                R: 2 //角度（0-360）的维度是2
              };
              // num++;

              // 在这里发送请求获取数据
              axios.get(this.url1 + this.port + '/getPoints')
                .then(response => {
                  var temp = response.data; //获取后端json数据并赋予给绘图模块data，有待解析
                  // console.log(response.data);
                  // let keys = Object.keys(temp);  // 获取对象中的keys，keys是一个由key组成的[]，
                  for (let iden in temp){
                    let item = temp[iden];
                    if(iden === 'plat'){
                      for(let key in temp[iden]){
                        let itemp = temp[iden][key];
                        let tem = [];
                        tem.push(itemp['longitude']);

                        console.log('target');

                        if (itemp['longitude'] > t_maxlong) {
                          t_maxlong = itemp['longitude'];
                        }
                        if (itemp['longitude'] < t_minlong) {
                          t_minlong = itemp['longitude'];
                        }
                        tem.push(itemp['latitude']);
                        if (itemp['latitude'] > t_maxlati) {
                          t_maxlati = itemp['latitude'];
                        }
                        if (itemp['latitude'] < t_minlati) {
                          t_minlati = itemp['latitude'];
                        }
                        tem.push(itemp['absolute_direction']);
                        tem.push(itemp['absolute_speed']);
                        t_plat.push(tem);
                      }

                    }else if(iden === 'target'){

                      for(let key in temp[iden]){
                        let itemp = temp[iden][key];
                        let tem = [];
                        tem.push(itemp['longitude']);

                        console.log('target');

                        if (itemp['longitude'] >= t_maxlong) {
                          t_maxlong = itemp['longitude'];
                        }
                        if (itemp['longitude'] <= t_minlong) {
                          t_minlong = itemp['longitude'];
                        }
                        tem.push(itemp['latitude']);
                        if (itemp['latitude'] >= t_maxlati) {
                          t_maxlati = itemp['latitude'];
                        }
                        if (itemp['latitude'] <= t_minlati) {
                          t_minlati = itemp['latitude'];
                        }
                        tem.push(itemp['absolute_direction']);
                        tem.push(itemp['absolute_speed']);
                        tem.push(key);
                        t_target.push(tem);
                      }
                    }
                  }

                  // console.log('plat:');
                  // console.log(this.plat);  // 调试用
                  // console.log('target:');
                  // console.log(this.target);  // 调试用

                }).catch((error) => { // 请求失败处理
                console.log(error);
                alert("输入数据获取失败！");
                clearInterval(this.timer);
              });



              // axios.get(this.url1 + this.port + '/getUnits')
              axios.get(this.url1 + this.port + '/getUnits')
                .then(response => {
                  var temp = response.data; //获取后端json数据并赋予给绘图模块data，有待解析
                  // console.log(response.data);
                  // let keys = Object.keys(temp);  // 获取对象中的keys，keys是一个由key组成的[]，
                  for (let iden in temp){
                    let item = temp[iden];
                    if(iden === 'ours'){
                      for(let key in item){
                        let itemp = item[key];
                        let tem = [];
                        tem.push(itemp['longitude']);
                        console.log('ours');
                        if (itemp['longitude'] >= t_maxlong) {
                          t_maxlong = itemp['longitude'];
                        }
                        if (itemp['longitude'] <= t_minlong) {
                          t_minlong = itemp['longitude'];
                        }
                        tem.push(itemp['latitude']);
                        if (itemp['latitude'] >= t_maxlati) {
                          t_maxlati = itemp['latitude'];
                        }
                        if (itemp['latitude'] <= t_minlati) {
                          t_minlati = itemp['latitude'];
                        }
                        tem.push(itemp['direction']);
                        tem.push(itemp['speed']);
                        tem.push(itemp['uuid']);
                        t_ally.push(tem);
                      }

                    }else if(iden === 'enemy'){

                      for(let key in item){
                        let itemp = item[key];
                        let tem = [];
                        tem.push(itemp['longitude']);
                        if (itemp['longitude'] >= t_maxlong) {
                          t_maxlong = itemp['longitude'];
                        }
                        if (itemp['longitude'] <= t_minlong) {
                          t_minlong = itemp['longitude'];
                        }
                        tem.push(itemp['latitude']);
                        if (itemp['latitude'] >= t_maxlati) {
                          t_maxlati = itemp['latitude'];
                        }
                        if (itemp['latitude'] <= t_minlati) {
                          t_minlati = itemp['latitude'];
                        }
                        tem.push(itemp['direction']);
                        tem.push(itemp['speed']);
                        tem.push(itemp['uuid']);
                        t_enemy.push(tem);
                      }
                    }
                  }

                  // console.log('enemy:');
                  // console.log(this.enemy);  // 调试用
                  // console.log('ally:');
                  // console.log(this.ally);  // 调试用

                }).catch((error) => { // 请求失败处理
                console.log(error);
                alert("输入数据获取失败！");
                clearInterval(this.timer);
              });

              // axios.get( this.url2 + this.port + '/getUnits')
              // axios.get(this.url1 + this.port + '/getUnits')
              //   .then(response => {
              //     var tempp = response.data; //获取后端json数据并赋予给绘图模块data，有待解析
              //     console.log(response.data);
              //     for (let key in tempp) { //遍历对象  注意{}表示对象， []表示数组（数组对象）
              //       let item = tempp[key];
              //       let tem = [];
              //       tem.push(tempp[key]['longitude']);
              //       if (tempp[key]['longitude'] >= this.maxlong) {
              //         this.maxlong = tempp[key]['longitude'];
              //       }
              //       if (tempp[key]['longitude'] <= this.minlong) {
              //         this.minlong = tempp[key]['longitude'];
              //       }
              //       tem.push(tempp[key]['latitude']);
              //       if (tempp[key]['latitude'] >= this.maxlati) {
              //         this.maxlati = tempp[key]['latitude'];
              //       }
              //       if (tempp[key]['latitude'] <= this.minlati) {
              //         this.minlati = tempp[key]['latitude'];
              //       }
              //       tem.push(tempp[key]['direction']);
              //       tem.push(tempp[key]['speed']);
              //       tem.push(tempp[key]['uuid']);
              //       this.rltimedata.push(tem);
              //       if (tempp[key]['plat'] === -1) {
              //         this.enemy.push(tem);
              //       } else {
              //         this.ally.push(tem);
              //       }
              //     }
              //     console.log('enemy:');
              //     console.log(this.enemy);  // 调试用
              //     console.log('ally:');
              //     console.log(this.ally);  // 调试用
                  // console.log(this.rltimedata);  // 调试用
              //
              //   })
              //   .catch((error) => { // 请求失败处理
              //     console.log(error);
              //     alert("输出数据获取失败！");
              //     clearInterval(this.timer);
              //   });

              // console.log('maxlong:');
              // console.log(t_maxlong);
              // console.log('minlong:');
              // console.log(t_minlong);
              // console.log('maxlati:');
              // console.log(t_maxlati);
              // console.log('minlati:');
              // console.log(t_minlati);

              console.log('plat:');
              console.log(t_plat);
              console.log('target:');
              console.log(t_target);
              console.log('enemy:');
              console.log(t_enemy);  // 调试用
              console.log('ally:');
              console.log(t_ally);  // 调试用

              this.chart.clear();
              this.chart.setOption({
                color: [
                  '#800080', '#90ee90','#dd4444','#0000ff'
                ],
                legend: {
                  top: 10,
                  data: ['平台', '目标', '我方', '敌方'],
                  textStyle: {
                    fontSize: 18
                  }
                },

                grid: {
                  left: '10%',
                  right: '10%',
                  top: '20%',
                  bottom: '15%'
                },


                tooltip: {
                  //十字线
                  axisPointer: {
                    type: 'cross'
                  },
                  padding: 10,
                  backgroundColor: ['rgba(255,255,255,0.7)'],
                  borderColor: '#777',
                  borderWidth: 2,
                  //设置tooltip的显示内容
                  formatter:  (obj)=>{
                    var value = obj.value;
                    return '<div style="border-bottom: 2px solid rgba(0,0,0,.3); font-size: 22px;padding-bottom: 7px;margin-bottom: 7px">'
                      // + "target:2001"
                      // + obj.seriesName + ' ' + value[0] + '日：'
                      // + value[7]
                      + '</div>'
                      + this.schema[0].text + '：' + value[0] + '<br>'
                      + this.schema[1].text + '：' + value[1] + '<br>'
                      + this.schema[2].text + '：' + value[2] + '<br>'
                      + this.schema[3].text + '：' + value[3] + '<br>'
                      + this.schema[4].text + '：' + value[4] + '<br>'
                  }
                },
                xAxis: {
                  type: 'value',
                  name: '经度',
                  nameGap: 16,
                  nameTextStyle: {
                    color: '#fff',
                    fontSize: 25
                  },
                  // min: 120, //原始模板，程序运行前修改
                  // max: 180, //原始模板，程序运行前修改
                  min: (t_minlong - 0.1 >= 0) ? (t_minlong - 0.001).toFixed(4) : 0,    //程序运行使用语句
                  max: (t_maxlong + 0.1 >= 180) ? 180 : (t_maxlong + 0.001).toFixed(4),   //程序运行使用语句
                  splitLine: {
                    show: false
                  },

                },
                yAxis: {
                  type: 'value',
                  name: '纬度',
                  nameLocation: 'end',
                  nameGap: 20,
                  nameTextStyle: {
                    color: '#fff',
                    fontSize: 25
                  },
                  // min: 0, //原始模板，程序运行前修改
                  // max: 90, //原始模板，程序运行前修改
                  min: (t_minlati - 0.1 >= 0) ? (t_minlati - 0.001).toFixed(4) : 0,
                  max: (t_maxlati + 0.1 >= 90) ? 90 : (t_maxlati + 0.001).toFixed(4),
                  splitLine: {
                    show: false
                  }
                },

                // visualMap: [
                //   {
                //     left: 'right',
                //     top: '10%',
                //     dimension: 2,
                //     min: this.minlong,
                //     max: this.maxlong,
                //     itemWidth: 30,
                //     itemHeight: 120,
                //     calculable: true,
                //     precision: 0.1,
                //     text: ['经度选择'],
                //     textGap: 30,
                //     inRange: {
                //       symbolSize: [10, 70]
                //     },
                //     outOfRange: {
                //       symbolSize: [10, 70],
                //       color: ['rgba(255,255,255,0.4)']
                //     },
                //     controller: {
                //       inRange: {
                //         color: ['#c23531']
                //       },
                //       outOfRange: {
                //         color: ['#fff']
                //       }
                //     }
                //   }
                // ],

                series: [
                  {
                    name: '平台',
                    type: 'scatter',
                    itemStyle: this.itemStyle,
                    data: [],
                    symbolSize: 1,
                  },

                  {
                    name: '目标',
                    type: 'scatter',
                    itemStyle: this.itemStyle,
                    data: [],
                    symbolSize: 1,
                  },

                  {
                    name: '我方',
                    type: 'scatter',
                    itemStyle: this.itemStyle,
                    data: [],
                    symbolSize: 1,
                  },

                  {
                    name: '敌方',
                    type: 'scatter',
                    itemStyle: this.itemStyle,
                    data: [],
                    symbolSize: 1,
                  },

                  // {
                  //   name: '融合结果',
                  //   type: 'scatter',
                  //   itemStyle: this.itemStyle,
                  //   data: [],
                  //   symbolSize: 15,
                  // },

                  {
                    /*echarts文档-配置项： series-custom
                          custom 系列需要开发者自己提供图形渲染的逻辑。这个渲染逻辑一般命名为 renderItem
                        */
                    type: 'custom',
                    renderItem: this.renderArrow,
                    /*echarts文档-配置项：series-line.encode
                            可以定义 data 的哪个维度被编码成什么。比如：
                            encode: {
                            x: [3, 1, 5],      // 表示维度 3、1、5 映射到 x 轴。
                            y: 2,              // 表示维度 2 映射到 y 轴。
                            tooltip: [3, 2, 4] // 表示维度 3、2、4 会在 tooltip 中显示。
                            }
                        */
                    encode: {
                      x: dims.longitude,
                      y: dims.latitude
                    },
                    data: t_plat,
                    /*
                            series-custom. z
                            自定义图组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。
                            z相比zlevel优先级更低，而且不会创建新的 Canvas。
                        */
                    z: 10
                  },

                  {
                    type: 'custom',
                    renderItem: this.renderArrow1,
                    encode: {
                      x: dims.longitude,
                      y: dims.latitude
                    },
                    data: t_target,
                    z: 10
                  },

                  {
                    type: 'custom',
                    renderItem: this.renderArrow2,
                    encode: {
                      x: dims.longitude,
                      y: dims.latitude
                    },
                    data: t_ally,
                    z: 10
                  },

                  {
                    type: 'custom',
                    renderItem: this.renderArrow3,
                    encode: {
                      x: dims.longitude,
                      y: dims.latitude
                    },
                    data: t_enemy,
                    z: 10
                  },

                  // {
                  //   type: 'custom',
                  //   renderItem: this.renderArrow4,
                  //   encode: {
                  //     x: dims.longitude,
                  //     y: dims.latitude
                  //   },
                  //   data: this.rltimedata,
                  //   z: 10
                  // },


                  // {
                  //   /*echarts文档-配置项： series-custom
                  //     custom 系列需要开发者自己提供图形渲染的逻辑。这个渲染逻辑一般命名为 renderItem
                  //   */
                  //   type: 'custom',
                  //   renderItem: this.renderArrow,
                  //   /*echarts文档-配置项：series-line.encode
                  //       可以定义 data 的哪个维度被编码成什么。比如：
                  //       encode: {
                  //       x: [3, 1, 5],      // 表示维度 3、1、5 映射到 x 轴。
                  //       y: 2,              // 表示维度 2 映射到 y 轴。
                  //       tooltip: [3, 2, 4] // 表示维度 3、2、4 会在 tooltip 中显示。
                  //       }
                  //   */
                  //   encode: {
                  //     x: dims.longitude,
                  //     y: dims.latitude
                  //   },
                  //   data: this.rltimedata,
                  //   /*
                  //       series-custom. z
                  //       自定义图组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。
                  //       z相比zlevel优先级更低，而且不会创建新的 Canvas。
                  //   */
                  //   z: 10
                  // },
                ],
              });

              // 清空数据，为新数据提供空的容器
              t_minlong = 180;
              t_maxlong = 0;
              t_minlati = 90;
              t_maxlati = 0;
              t_plat = [];
              t_target = [];
              t_ally = [];
              t_enemy = [];

            }

            // if (num === 100) {  // 用于设定刷新次数，暂时不使用。
            //   clearInterval(this.timer);
            //   this.runflag = false;
            // }

          }, 1500)
        }
    },

      getStop(){
        clearInterval(this.timer);
        this.runflag = false;
      },

      changeFlag(){
        if(this.runflag === false){
          clearInterval(this.timer);
          this.runflag = true;
        }
      },

      renderArrow(param, api) {
        /*
            echarts文档-配置项： series-custom. renderItem
            对于 data 中的每个数据项（为方便描述，这里称为 dataItem)，会调用此 renderItem 函数。

            renderItem 函数提供了两个参数：

            params：包含了当前数据信息和坐标系的信息。
            api：是一些开发者可调用的方法集合。
            renderItem 函数须返回根据此 dataItem 绘制出的图形元素的定义信息，参见 renderItem.return。

            一般来说，renderItem 函数的主要逻辑，是将 dataItem 里的值映射到坐标系上的图形元素。这一般需要用到 renderItem.arguments.api 中的两个函数：

            api.value(...)，意思是取出 dataItem 中的数值。例如 api.value(0) 表示取出当前 dataItem 中第一个维度的数值。
            api.coord(...)，意思是进行坐标转换计算。例如 var point = api.coord([api.value(0), api.value(1)]) 表示 dataItem 中的数值转换成坐标系上的点。
            有时候还需要用到 api.size(...) 函数，表示得到坐标系上一段数值范围对应的长度。

            返回值中样式的设置可以使用 api.style(...) 函数，他能得到 series.itemStyle 中定义的样式信息，以及视觉映射的样式信息。也可以用这种方式覆盖这些样式信息：api.style({fill: 'green', stroke: 'yellow'})。


        */
        //数据参数顺序
        let dims = {
          longitude: 0,  //  data的第0维data[0]是longitude,第1维data[1]是latitude,第2维data[2]是航行,
          latitude: 1,
          R: 2
        };
        let arrowSize = 16;  // 箭头图标大小

        var point = api.coord([
          api.value(dims.longitude),
          api.value(dims.latitude)
        ]);
        let rotationData= api.value(dims.R);
        //  console.log('param',param);
        //  console.log('api',api);
        //  console.log('point',point);

        let obj={
          type: 'path',
          shape: {
            // pathData: 'M 146.5 230 L 141.298 239.011 L 146.5 219.595 L 151.702 239.011 Z',//绘制图形
            pathData: 'M 0 20 L 10 20 L 5 0 Z',//绘制图形  绘制箭头，与上一行代码等价
            // pathData: 'M 15 30 L 0 60 L 15 0 L 30 60 Z',//绘制图形  绘制箭头，与上一行代码等价
            //'M31 16l-15-15v9h-26v12h26v9z',
            x: -arrowSize / 2,
            y: -arrowSize / 2,
            width: arrowSize,
            height: arrowSize
          },
          rotation: -rotationData*(Math.PI/180) ,   //旋转（rotation）：默认值是 0。表示旋转的弧度值。正值表示逆时针旋转。
          //echarts文档-配置项： series-custom.renderItem.return_path. rotation
          //旋转（rotation）：默认值是 0。表示旋转的弧度值。正值表示逆时针旋转。
          //1) 角度转换为弧度公式：弧度=角度*(π /180 )
          //2)弧度转换为角度公式： 角度=弧度*（180/π）
          //平移（position）：默认值是 [0, 0]。表示 [横向平移的距离, 纵向平移的距离]。右和下为正值。
          position: point,
          style: api.style({
            // stroke: 'rgb(255, 255, 255)',//图形颜色
            stroke: 'rgb(0, 0, 0)',//图形颜色
            fill: this.color[0], // 填充颜色
            lineWidth: 1
          })

        };
        //console.log('obj',obj);
        return obj
      },

      renderArrow1(param, api) {
        //数据参数顺序
        let dims = {
          longitude: 0,  //  data的第0维data[0]是longitude,第1维data[1]是纬度,第2维data[2]是航行,
          latitude: 1,
          R: 2
        };
        let arrowSize = 16;  // 箭头图标大小

        var point = api.coord([
          api.value(dims.longitude),
          api.value(dims.latitude)
        ]);
        let rotationData= api.value(dims.R);
        let obj={
          type: 'path',
          shape: {
            // pathData: 'M 146.5 230 L 141.298 239.011 L 146.5 219.595 L 151.702 239.011 Z',//绘制图形
            pathData: 'M 0 20 L 10 20 L 5 0 Z',//绘制图形  绘制箭头，与上一行代码等价
            // pathData: 'M 15 30 L 0 60 L 15 0 L 30 60 Z',//绘制图形  绘制箭头，与上一行代码等价
            //'M31 16l-15-15v9h-26v12h26v9z',
            x: -arrowSize / 2,
            y: -arrowSize / 2,
            width: arrowSize,
            height: arrowSize
          },
          rotation: -rotationData*(Math.PI/180),   //旋转（rotation）：默认值是 0。表示旋转的弧度值。正值表示逆时针旋转。
          position: point,
          style: api.style({
            stroke: 'rgb(0, 0, 0)',//图形颜色
            fill: this.color[1], // 填充颜色
            lineWidth: 1
          })

        };
        return obj
      },

      renderArrow2(param, api) {
        //数据参数顺序
        let dims = {
          longitude: 0,  //  data的第0维data[0]是longitude,第1维data[1]是纬度,第2维data[2]是航行,
          latitude: 1,
          R: 2
        };
        let arrowSize = 30;  // 箭头图标大小

        var point = api.coord([
          api.value(dims.longitude),
          api.value(dims.latitude)
        ]);
        let rotationData= api.value(dims.R);
        let obj={
          type: 'path',
          shape: {
            // pathData: 'M 146.5 230 L 141.298 239.011 L 146.5 219.595 L 151.702 239.011 Z',//绘制图形
            pathData: 'M 0 20 L 10 20 L 5 0 Z',//绘制图形  绘制箭头，与上一行代码等价
            // pathData: 'M 15 30 L 0 60 L 15 0 L 30 60 Z',//绘制图形  绘制箭头，与上一行代码等价
            //'M31 16l-15-15v9h-26v12h26v9z',
            x: -arrowSize / 2,
            y: -arrowSize / 2,
            width: arrowSize,
            height: arrowSize
          },
          rotation: -rotationData*(Math.PI/180),   //旋转（rotation）：默认值是 0。表示旋转的弧度值。正值表示逆时针旋转。
          position: point,
          style: api.style({
            stroke: 'rgb(255, 0, 0)',//图形颜色
            fill: this.color[2], // 填充颜色
            lineWidth: 1
          })

        };
        return obj
      },

      renderArrow3(param, api) {
        //数据参数顺序
        let dims = {
          longitude: 0,  //  data的第0维data[0]是longitude,第1维data[1]是纬度,第2维data[2]是航行,
          latitude: 1,
          R: 2
        };
        let arrowSize = 30;  // 箭头图标大小

        var point = api.coord([
          api.value(dims.longitude),
          api.value(dims.latitude)
        ]);
        let rotationData= api.value(dims.R);
        let obj={
          type: 'path',
          shape: {
            // pathData: 'M 146.5 230 L 141.298 239.011 L 146.5 219.595 L 151.702 239.011 Z',//绘制图形
            pathData: 'M 0 20 L 10 20 L 5 0 Z',//绘制图形  绘制箭头，与上一行代码等价
            // pathData: 'M 15 30 L 0 60 L 15 0 L 30 60 Z',//绘制图形  绘制箭头，与上一行代码等价
            //'M31 16l-15-15v9h-26v12h26v9z',
            x: -arrowSize / 2,
            y: -arrowSize / 2,
            width: arrowSize,
            height: arrowSize
          },
          rotation: -rotationData*(Math.PI/180),   //旋转（rotation）：默认值是 0。表示旋转的弧度值。正值表示逆时针旋转。
          position: point,
          style: api.style({
            stroke: 'rgb(255, 0, 0)',//图形颜色
            fill: this.color[3], // 填充颜色
            lineWidth: 1
          })

        };
        return obj
      },

      // renderArrow4(param, api) {
      //   //数据参数顺序
      //   var dims = {
      //     longitude: 0,  //  data的第0维data[0]是longitude,第1维data[1]是纬度,第2维data[2]是航行,
      //     latitude: 1,
      //     R: 2
      //   };
      //   var arrowSize = 20;  // 箭头图标大小
      //
      //   var point = api.coord([
      //     api.value(dims.longitude),
      //     api.value(dims.latitude)
      //   ]);
      //   let rotationData= api.value(dims.R);
      //   let obj={
      //     type: 'path',
      //     shape: {
      //       // pathData: 'M 146.5 230 L 141.298 239.011 L 146.5 219.595 L 151.702 239.011 Z',//绘制图形
      //       pathData: 'M 0 0 L 10 0 L 5 20 Z',//绘制图形  绘制箭头，与上一行代码等价
      //       // pathData: 'M 15 30 L 0 60 L 15 0 L 30 60 Z',//绘制图形  绘制箭头，与上一行代码等价
      //       //'M31 16l-15-15v9h-26v12h26v9z',
      //       x: -arrowSize / 2,
      //       y: -arrowSize / 2,
      //       width: arrowSize,
      //       height: arrowSize
      //     },
      //     rotation: -rotationData*(Math.PI/180),   //旋转（rotation）：默认值是 0。表示旋转的弧度值。正值表示逆时针旋转。
      //     position: point,
      //     style: api.style({
      //       stroke: 'rgb(255, 0, 0)',//图形颜色
      //       fill: this.color[4], // 填充颜色
      //       lineWidth: 1
      //     })
      //
      //   };
      //   return obj
      // },

      // 初始化echarts
      getCharts(){

        this.schema = [
          {name: 'longitude', index: 0, text: '经度'},
          {name: 'latitude', index: 1, text: '纬度'},
          {name: 'orientation', index: 2, text: '航向'},
          {name: 'speed', index: 3, text: '速度'},
          {name: 'uuid', index: 4, text: '属性'},
        ];


        this.itemStyle = {
          //设置圆形的样式
          shadowBlur: 5,
          shadowColor: 'rgba(120, 36, 50, 0.5)',
          shadowOffsetY: 5,
        };
        this.conversionChart = this.$echarts.init(this.$refs.conversion);
        this.chart = this.conversionChart;
        // console.log('111111');
        // this.conversionChart.setOption({
        //
        //   color: [
        //     '#fec42c', '#80f1be','#800080','#90ee90','#dd4444'
        //   ],
        //   legend: {
        //     top: 10,
        //     data: ['水面平台','水下平台','水面目标','水下目标','融合结果'],
        //     textStyle: {
        //       fontSize: 16
        //     }
        //   },
        //   grid: {
        //     left: '10%',
        //     right: '10%',
        //     top: '20%',
        //     bottom: '15%'
        //   },
        //   tooltip: {
        //     //十字线
        //     axisPointer: {
        //       type: 'cross'
        //     },
        //     padding: 10,
        //     backgroundColor: '#222',
        //     borderColor: '#777',
        //     borderWidth: 2,
        //     //设置tooltip的显示内容
        //     formatter: function (obj) {
        //       var value = obj.value;
        //       let that = this;
        //       return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'
        //         // + "targetname:2001"
        //         // + obj.seriesName + ' ' + value[0] + '日：'
        //         // + value[7]
        //         + '</div>'
        //         + that.schema[0].text + '：' + value[0] + '<br>'
        //         + that.schema[1].text + '：' + value[1] + '<br>'
        //         + that.schema[2].text + '：' + value[2] + '<br>'
        //         + that.schema[3].text + '：' + value[3] + '<br>'
        //         + that.schema[4].text + '：' + value[4] + '<br>'
        //     }
        //   },
        //   xAxis: {
        //     type: 'value',
        //     name: '经度',
        //     nameGap: 16,
        //     nameTextStyle: {
        //       color: '#fff',
        //       fontSize: 25
        //     },
        //     min: 120, //原始模板，程序运行前修改
        //     max: 180, //原始模板，程序运行前修改
        //     // min: (this.minlong - 5 >= 0)? Number(this.minlong - 5 ) : 0,    //程序运行使用语句
        //     // max: (this.maxlong + 5 >= 180) ? 180 : Number(this.maxlong + 5),   //程序运行使用语句
        //     splitLine: {
        //       show: false
        //     },
        //
        //   },
        //   yAxis: {
        //     type: 'value',
        //     name: '纬度',
        //     nameLocation: 'end',
        //     nameGap: 20,
        //     nameTextStyle: {
        //       color: '#fff',
        //       fontSize: 25
        //     },
        //     min: 0, //原始模板，程序运行前修改
        //     max: 90, //原始模板，程序运行前修改
        //     // min: (this.minlati - 5 >=0)? Number(this.minlati - 5) : 0,
        //     // max: (this.maxlati + 5 >=90)? 90 : Number(this.maxlati + 5),
        //     splitLine: {
        //       show: false
        //     }
        //   },
        //
        //   series: [
        //     {
        //       name: '水面平台',
        //       type: 'scatter',
        //       itemStyle: this.itemStyle,
        //       data: this.plat,
        //       symbolSize: 15,
        //     },
        //     {
        //       name: '水下平台',
        //       type: 'scatter',
        //       itemStyle: this.itemStyle,
        //       data: this.water_plat,
        //       symbolSize: 15,
        //     },
        //     {
        //       name: '水面目标',
        //       type: 'scatter',
        //       itemStyle: this.itemStyle,
        //       data: this.points,
        //       symbolSize: 15,
        //     },
        //     {
        //       name: '水下目标',
        //       type: 'scatter',
        //       itemStyle: this.itemStyle,
        //       data: this.water_points,
        //       symbolSize: 15,
        //     },
        //     {
        //       name: '融合结果',
        //       type: 'scatter',
        //       itemStyle: this.itemStyle,
        //       data: this.rltimedata,
        //       symbolSize: 15,
        //     },
        //   ]
        // })
      },
    },

    // 监听图表数据的变化
    // watch: {
    //   //观察rltimedata的变化
    //   option(newvalue, oldvalue) {
    //     if (this.chart) {
    //       if (newvalue) {
    //         this.chart.setOption(newVal);
    //       } else {
    //         this.chart.setOption(oldVal);
    //       }
    //     } else {
    //       this.init();
    //     }
    //   },
    //     deep: true //对象内部属性的监听，关键。
    //   }


  }

</script>
<style scoped>

</style>
